<template>
	<zh-form label-position="top" :model="_value" :span="24">
		<zh-form-switch prop="formFlag" label="是否表单模式" v-model="_value.formFlag"> </zh-form-switch>
		<zh-form-radio
			:disabled="!_value.formFlag"
			prop="labelPosition"
			label="标签位置"
			:options="[
				{ dictKey: 'left', dictValue: 'left' },
				{ dictKey: 'right', dictValue: 'right' },
				{ dictKey: 'top', dictValue: 'top' },
			]"
			v-model="_value.labelPosition"
		></zh-form-radio>

		<zh-form-radio
			:disabled="!_value.formFlag"
			prop="size"
			label="表单尺寸"
			:options="[
				{ dictKey: 'large', dictValue: 'large' },
				{ dictKey: 'default', dictValue: 'default' },
				{ dictKey: 'small', dictValue: 'small' },
			]"
			v-model="_value.size"
		></zh-form-radio>
		<zh-form-input :disabled="!_value.formFlag" prop="labelWidth" label="标签宽度" v-model="_value.labelWidth"></zh-form-input>
    <zh-form-number :disabled="!_value.formFlag" prop="span" label="组件布局规则" v-model="_value.span"></zh-form-number>
		<zh-form-number :disabled="!_value.formFlag" prop="gutter" label="行内间距" v-model="_value.gutter"></zh-form-number>
    <zh-form-switch
			:disabled="!_value.formFlag"
			prop="hideRequiredAsterisk"
			label="隐藏必填字段的标签旁边的红色星号"
			v-model="_value.hideRequiredAsterisk"
		>
		</zh-form-switch>
		<zh-form-switch :disabled="!_value.formFlag" prop="showMessage" label="显示校验错误信息" v-model="_value.showMessage"> </zh-form-switch>
		<zh-form-switch :disabled="!_value.formFlag" prop="inlineMessage" label="以行内形式展示校验信息" v-model="_value.inlineMessage"> </zh-form-switch>
		<zh-form-switch :disabled="!_value.formFlag" prop="disabled" label="是否禁用表单内的所有组件" v-model="_value.disabled"> </zh-form-switch>
		<zh-form-switch :disabled="!_value.formFlag" prop="submitBtn" label="是否显示表单提交按钮" v-model="_value.submitBtn"> </zh-form-switch>
		<zh-form-switch :disabled="!_value.formFlag" prop="resetBtn" label="是否显示表单重置按钮" v-model="_value.resetBtn"> </zh-form-switch>
	</zh-form>
</template>
<script lang="ts" setup name="FormSetting">
const emits = defineEmits(['update:modelValue']);
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	modelValue: Object,
});
//------------------定义子组件---------------------------

//------------------内部变量定义-------------------------
let _value = ref(props.modelValue || { formFlag: true });
//------------------定义调用方法-------------------------

//------------------初始化------------------------------
onMounted(() => {});
//------------设置给父组件调用的数据/方法(组件)-----------
watch(
	() => props.modelValue,
	(val) => {
		_value.value = val || { formFlag: true };
	},
	{
		deep: true,
	}
);
watch(
	() => _value.value,
	(val) => {
		console.log(val);
		emits('update:modelValue', val);
	},
	{
		deep: true,
	}
);
</script>
<style lang="scss" scoped></style>
